/**
 * 报警趋势分析
 */
import * as React from "react";
import { Button, Card, Modal } from "antd";
import { getWarnCountData } from "../../../ServeApi";
import ReactEcharts from "echarts-for-react";
import icon_baojingqushifenxi from "../../../../../../assets/img/dianqianquan/icon_baojingqushifenxi.png";
import "./index.less";
import moment from "moment";
import { AjaxData } from "../../../../../../data/interface/publicInterface";

export interface WarnTrendAnalysisProps {}

export interface WarnTrendAnalysisState {
  type: number;
}

class WarnTrendAnalysis extends React.Component<
  WarnTrendAnalysisProps,
  WarnTrendAnalysisState
> {
  state = { type: 1 };
  private option = {};
  componentWillMount() {
    this.getPream();
  }
  getPream(type?: number) {
    let pream = {
      start: moment().add(-30, "day").startOf("day").valueOf(),
      end: moment().valueOf(),
      type: 2,
    };
    if (type) {
      switch (type) {
        case 1:
          pream = {
            start: moment().add(-30, "day").startOf("day").valueOf(),
            end: moment().valueOf(),
            type: 2,
          };
          break;
        case 2:
          pream = {
            start: moment().add(-1, "year").startOf("day").valueOf(),
            end: moment().valueOf(),
            type: 3,
          };
          break;
        default:
          break;
      }
    }

    console.log(pream);
    this.getWarnCountData(pream);
  }
  /**请求数据 */
  async getWarnCountData(pream) {
    try {
      let res: any = await getWarnCountData(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        this.option = this.getOption(json.data);
        this.forceUpdate();
      }
    } catch (error) {
      Modal.error({
        title: `初始化报警趋势失败，无法读取报警趋势数据，请刷新页面。`,
      });
    }
  }
  render() {
    return (
      <div className="WarnTrendAnalysis">
        <Card
          title={
            <>
              <img src={icon_baojingqushifenxi} alt="报警趋势分析" />
              报警趋势分析
            </>
          }
        >
          <div className="changeType_btn change">
            <Button
              className="left"
              type={this.state.type === 1 ? "primary" : "default"}
              onClick={() => {
                this.setState({ type: 1 });
                this.forceUpdate();
                this.getPream(1);
              }}
            >
              近30天
            </Button>
            <Button
              className="right"
              type={this.state.type === 2 ? "primary" : "default"}
              onClick={() => {
                this.setState({ type: 2 });
                this.forceUpdate();
                this.getPream(2);
              }}
            >
              近12月
            </Button>
          </div>
          <ReactEcharts
            option={this.option}
            notMerge={true}
            lazyUpdate={true}
            style={{ height: 300, width: "100%" }}
            // theme="dark"
          />
        </Card>
      </div>
    );
  }
  getOption(data: any) {
    let alarmArr: number[] = [];
    let timeArr: string[] = data.alarmData.map((item: any, i: number) => {
      alarmArr.push(item.num);
      return item.time;
    });
    let faultArr: number[] = data.faultData.map((item: any, i: number) => {
      return item.num;
    });

    return {
      legend: {
        data: ["报警数", "故障数"],
        bottom: 5,
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        data: timeArr,
        axisLabel: {
          interval: 0,
          rotate: 45,
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "报警数",
          type: "line",
          smooth: true,
          data: alarmArr,
        },
        {
          name: "故障数",
          type: "line",
          smooth: true,
          data: faultArr,
        },
      ],
    };
  }
}

export default WarnTrendAnalysis;
